<!DOCTYPE html>
<!--

cartwheel-tiling.html

Cartwheel Tiling Thought Patch

Copyright (C) 2010, Chris Allert, All rights reserved.

This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 3 of the License, or (at your option) any later 
version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA

The latest version of this file can be downloaded from
http://thought-patches.sourceforge.net/

-->
<html manifest="cartwheel-tiling.manifest">
<head>
<title>cartwheel</title>
<link rel="apple-touch-icon" href="cartwheel-tiling.png">
<link rel="apple-touch-startup-image" href="cartwheel-tiling-startup.png">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta content="width=device-width; initial-scale=1.0;  maximum-scale=1.0; user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<style>
	* {
		font-family: sans-serif;
		-webkit-user-select: none;
	}
	body { 
		padding:0px; 
		margin:0px; 
		color: white; 
		background-color: black; 
		overflow: hidden;
	}
	input { 
		font-size:16px;
		padding: 0px;
	}
	div { padding:0px; margin:0px; }
	canvas { padding:0px; margin:0px; position: absolute; }
	*.clicker {
		font-family: monospace;
		font-size:24px;
		padding-top: 8px;
		padding-bottom: 8px;
		padding-left: 12px;
		padding-right: 12px;
		border-width: 1px;
		border-style: solid;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		background-color: white;
		color: black;
	}
</style>
<script src="../../lib/canvas.js"></script>
<script src="../../lib/query.js"></script>
<script src="cartwheel-tiling.js"></script>
</head>
<body onload="init()">
	<div id="canvas_div" style="position: absolute; "><canvas id="canvas" class="canvas"  width="320" height="320">This site does not work in your browser.<br /><a href="http://code.google.com/chrome/chromeframe/">click here to install</a></canvas></div>
	<div id="click_div" style="position: absolute; ">&nbsp;</div>
	<div id="download_link" style="position: absolute; opacity: 0.5; white-space: nowrap; ">&nbsp;</div>
	<div id="form_div_top" style="text-align: center; position: absolute; opacity: 0.8; background-color: black; white-space: nowrap; line-height: 48px; padding: 18px; visibility: hidden; -moz-border-raduis: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-style: solid; color: gray;">
		<span class="clicker" onclick="changed_options('change')">*</span>
		<span class="clicker" id="opt_p1" onclick="changed_options('p1')">1</span>
		<span class="clicker" id="opt_p2" onclick="changed_options('p2')">2</span>
		<span class="clicker" id="opt_p3" onclick="changed_options('p3')">3</span>
		<span class="clicker" onclick="changed_options('zoom_in')">+</span>
		<span class="clicker" onclick="changed_options('zoom_out')">-</span>
			<span class="clicker" id="opt_help" onclick="show_help('p1')">?</span>
	</div>
	<div id="form_div_bottom" style="text-align: center; position: absolute; opacity: 0.8; background-color: black; white-space: nowrap; line-height: 48px; padding: 18px; visibility: hidden; -moz-border-raduis: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-style: solid; color: gray;">
			<span class="clicker" id="opt_arcs" onclick="changed_options('arcs')">A</span>
			<span class="clicker" id="opt_bars" onclick="changed_options('bars')">B</span>
			<span class="clicker" id="opt_rings" onclick="changed_options('rings')">C</span>
			<span class="clicker" id="opt_cartwheel" onclick="changed_options('cartwheel')">D</span>
			<span class="clicker" id="opt_edges" onclick="changed_options('edges')">E</span>
			<span class="clicker" id="opt_colors" onclick="changed_options('colors')">F</span>
			<span class="clicker" id="opt_decagon" onclick="changed_options('decagon')">G</span>
			<br />
			<!--
		<span class="clicker" onclick="changed_options('change')">change</span>
		-->
			<span class="clicker" id="opt_gray" onclick="changed_options('gray')">gray</span>
		<span class="clicker" onclick="changed_options('auto')" id="opt_auto">**</span>
		<span id="share_link" class="clicker" onclick="changed_options('share')">share</span>
		<span class="clicker" onclick="changed_options('hide')">ok</span>
	</div>
	<div id="help" onclick="hide_help()" style="position: absolute; text-align: center; background-color: rgba(127, 127, 127, .8); padding: 12px; border-style: solid; border-width: 1px; visibility: hidden; -moz-border-radius: 20px; -webkit-border-radius: 20px; ">
<pre style="font-family: monospace; text-align: left; ">*: change tiling randomly
1: p1 tiles (pentagons)
2: p2 tiles (kites &amp; darts)
3: p3 tiles (rhombs)
+: zoom in
-: zoom out
?: show help
A: arcs on p1 or p2 tiles
B: ammann bars
C: circles around p1 tiles
D: discs around decagons
E: edges of p2 or p3 tiles
F: fill p2 or p3 tiles
G: decagon edges
**: keep changing options
share: bookmark or share tiling
ok: hide menu
</pre>
<span style="whitespace: nowrap;"><a class="clicker" href="http://en.wikipedia.org/wiki/Penrose_tiling" target="_blank">learn more</a>
	<span class="clicker">ok</span></span>
</div>
</body>
</html>

